<template>
  <view class="index-page" v-show="pageLoaded">
    <u-navbar
      :placeholder="false"
      :bgColor="bgColor"
      :title="scrollTop > 100 ? '首页' : ''"
    >
      <view class="u-nav-slot" slot="left"></view>
    </u-navbar>
    <!--     swiper-->
    <u-swiper
      height="520rpx"
      radius="0"
      :list="swiperContentList"
      indicator
      :indicatorStyle="{ bottom: '40rpx' }"
      indicatorInactiveColor="rgba(255,255,255,0.2)"
      indicatorActiveColor="rgba(255,255,255,0.6)"
      indicatorMode="line"
      circular
      @click="handleSwiper"
    ></u-swiper>
    <view class="index-wrap">
      <!--        公告-->
      <view class="announcement">
        <view class="icon">
          <u-image
            width="48rpx"
            height="48rpx"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/home/img3.png"
          ></u-image>
        </view>

        <u-notice-bar
          :text="noticeContentList"
          color="#4C4C4B"
          fontSize="28rpx"
          bgColor="transparent"
          direction="column"
          :speed="120"
          :duration="4000"
          @click="handleToNoticeDet"
        >
        </u-notice-bar>
        <view class="icon-arrow-right">
          <u-image
            width="32rpx"
            height="32rpx"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/home/img8.png"
            @click="handleGoNotice(notices, notices.visitPath)"
          ></u-image>
        </view>
      </view>
      <!--        分类-->
      <view class="booking-types">
        <view
          class="item"
          v-for="(item, index) in ballCategory"
          :key="item.dictValue"
          @click="
            toURL(
              `/pages/booking/index`,
              { dictValue: item.dictValue },
              { type: 'switch' }
            )
          "
        >
          <u-image
            width="72rpx"
            height="72rpx"
            :src="`https://ltjt.sjzballsportpark.com/statics/tyc/static/home/img${item.imgIndex}.png`"
          ></u-image>
          <view class="title">{{ item._dictLabel }}</view>
        </view>
      </view>
      <!--        商城周边-->
      <view class="mall-rim">
        <view
          class="title"
          @click="toURL(goodsAbout.visitPath, {}, { type: 'switch' })"
        >
          <image
            class="title-img"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/home/img9.png"
          ></image>
          <image
            class="arrow-right"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/home/img6.png"
          ></image>
        </view>
        <view class="tip" style="opacity: 0">摇滚商城 8月28日开售</view>
        <scroll-view scroll-x :indicator="false" class="mall-scroll">
          <view
            class="scroll-item"
            v-for="item in goodsAbout.item"
            :key="item.contenId"
            @click="link(item, goodsAbout.contentPath)"
          >
            <u-image
              width="252rpx"
              height="176rpx"
              radius="12rpx"
              :src="img_api + item.imgPath"
            ></u-image>
          </view>
        </scroll-view>
      </view>
      <!--        热门场馆-->
      <view class="hot-venue">
        <view class="module-title plr32">
          <view class="module-name">热门场馆</view>
          <view
            class="more"
            @click="toURL(spotList.visitPath, {}, { type: 'switch' })"
            >全部
          </view>
        </view>
        <view class="module-content">
          <scroll-view scroll-x class="hot-venue-scroll">
            <view class="scroll-list">
              <view
                v-for="it in spotList.item"
                :key="it.contenId"
                class="scroll-item-box"
              >
                <view class="scroll-item">
                  <u-image
                    width="400rpx"
                    height="240rpx"
                    radius="16rpx 16rpx 0 0"
                    :src="img_api + it.imgPath"
                  ></u-image>
                  <view class="info">
                    <view class="title u-line-1">{{ it.title }}</view>
                    <view
                      class="venue-reverse-btn"
                      @click="link(it, spotList.contentPath)"
                    >
                      预约
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <!--        活动资讯-->
      <view class="events-news">
        <view class="module-title">
          <view class="module-name">活动资讯</view>
          <view
            class="more"
            @click="
              toURL(informationList.visitPath, { id: informationList.id })
            "
            >全部
          </view>
        </view>
        <view class="module-content">
          <view class="events-news-scroll">
            <view
              class="scroll-item"
              v-for="it in informationList.item"
              :key="it.contenId"
              @click="link(it, informationList.contentPath)"
            >
              <u-image
                width="100%"
                height="320rpx"
                radius="16rpx"
                :src="img_api + it.imgPath"
              ></u-image>
              <view class="info">
                <view class="title u-line-1">{{ it.title }}</view>
                <view class="time" v-if="false">2023年02月28日 16:51</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="ad_wrap" v-if="showAd">
      <view class="ad_img">
        <image
          :src="img_api + adItem.item[0].imgPath"
          @click="link(adItem.item[0], adItem.contentPath)"
        ></image>
      </view>
      <view @click="closeAd" class="close">
        <image
          src="https://ltjt.sjzballsportpark.com/statics/tyc/static/delete2.png"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import { getBookingType, getElements } from "@/config/api.js";

export default {
  data() {
    return {
      pageLoaded: false,
      scrollTop: 0,
      swiperList: {}, // 顶部swiper
      swiperContentList: [],
      goodsAbout: {}, //  周边商城
      informationList: {}, // 热门活动
      notices: {}, // 公告
      noticeContentList: [],
      spotList: {}, // 热门场馆
      adItem: {}, // 弹框
      showAd: false,
      isShowAd: uni.getStorageSync("isShowAd"),
      ballCategory: [], //球形分类
    };
  },
  onLoad() {
    getBookingType().then(({ data = [] }) => {
      // 对应图片地址
      const aBallParkImageMap = {
        篮球场: "11",
        足球场: "12",
        网球场: "13",
        乒乓球场: "14",
        羽毛球场: "15",
      };
      data.forEach((item) => {
        item.imgIndex = aBallParkImageMap[item.dictLabel] || "";
        item._dictLabel = item.dictLabel.replace("场", "");
      });
      this.ballCategory = data;
    });
    this.getContent();
  },
  computed: {
    bgColor() {
      return this.scrollTop > 100 ? "#ffffff" : "transparent";
    },
  },

  methods: {
    // 跳转公告列表
    handleGoNotice(info, url) {
      uni.navigateTo({
        url: `${url}?id=${info.id}`,
      });
    },
    //首页各种元素
    getContent() {
      getElements().then((res) => {
        if (res.code === 200) {
          // 公告列表
          this.notices = res.notice;
          for (let i = 0; i < res.notice.item.length; i++) {
            this.noticeContentList.push(res.notice.item[i].title);
          }
          // 头部轮播
          this.swiperList = res.topCarousel;
          for (let i = 0; i < res.topCarousel.item.length; i++) {
            this.swiperContentList.push(
              this.img_api + res.topCarousel.item[i].imgPath
            );
          }
          //热门活动
          this.informationList = res.playInfo;
          //热门场馆
          this.spotList = res.hotGym;
          //弹窗
          this.adItem = res.popNotice;
          if (res.popNotice.item.length > 0 && !this.isShowAd) {
            this.showAd = true;
            uni.setStorageSync("isShowAd", true);
          }
          ///周边商城
          this.goodsAbout = res.goodsAbout;
        }
        this.pageLoaded = true;
      });
    },
    //点击公告列表    跳转详情
    handleToNoticeDet(e) {
      this.link(this.notices.item[e], this.notices.contentPath);
    },
    closeAd() {
      this.showAd = false;
    },
    //头部轮播  点击跳转详情
    handleSwiper(e) {
      let info = this.swiperList.item[e];
      this.link(info, this.swiperList.contentPath);
    },
    //首页跳转
    link(info, url) {
      if (info.linkType == "0") {
        if (info.linkUrl) {
          uni.navigateTo({
            url: info.linkUrl,
          });
        } else {
          // 内部链接 但是没有写 默认用这一类的链接拼id
          uni.navigateTo({
            url: `${url}?id=${info.contenId}`,
          });
        }
      } else {
        // 外部链接
        uni.navigateTo({
          url: `/pages/web/index?url=${info.linkUrl}`,
        });
      }
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>

<style lang="scss">
.index-page {
  min-height: 100vh;
  background: #fff;

  .u-notice-bar {
    padding: 0 !important;
  }

  .u-notice__left-icon {
    display: none !important;
  }

  .u-notice__swiper {
    height: 96rpx !important;
  }

  .plr32 {
    padding-left: 32rpx;
    padding-right: 32rpx;
  }

  .module-title {
    display: flex;
    justify-content: space-between;

    .module-name {
      font-size: 36rpx;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.9);
      line-height: 50rpx;
      padding-left: 20rpx;
      position: relative;

      &:before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        width: 4rpx;
        height: 32rpx;
        background: #ff5000;
        opacity: 1;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
      }
    }

    .more {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 48rpx;
      padding-right: 40rpx;
      position: relative;

      &:after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        width: 32rpx;
        height: 32rpx;
        background: #fff
          url("https://ltjt.sjzballsportpark.com/statics/tyc/static/home/img8.png")
          no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
  }

  .icon-adr {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    line-height: 32rpx;

    image {
      display: block;
      width: 24rpx;
      height: 24rpx;
      margin-right: 8rpx;
    }
  }

  .index-wrap {
    position: relative;
    top: -24rpx;
    z-index: 1;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    padding-top: 32rpx;
    padding-bottom: 60rpx;
    background-color: #fff;
  }

  .announcement {
    margin: 0 32rpx;
    display: flex;
    align-items: center;
    height: 96rpx;
    background: linear-gradient(
      180deg,
      rgba(241, 214, 199, 0.3) 0%,
      rgba(255, 255, 255, 0.15) 100%
    );
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(187, 101, 31, 0.1);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    border: 3rpx solid rgba(255, 255, 255, 0.5);
    padding: 0 24rpx;

    .icon {
      margin-right: 16rpx;
    }

    .icon-arrow-right {
      margin-left: 16rpx;
    }
  }

  .booking-types {
    display: flex;
    margin: 46rpx 32rpx 0;
    padding: 0 12rpx;
    justify-content: space-between;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .title {
        margin-top: 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 34rpx;
      }
    }
  }

  .mall-rim {
    margin: 40rpx 32rpx 0;
    height: 320rpx;
    background: #ff5000
      url("https://ltjt.sjzballsportpark.com/statics/tyc/static/home/img5.png")
      no-repeat right 0;
    background-size: 400rpx 320rpx;
    border-radius: 16rpx;
    padding: 24rpx;

    .title {
      display: flex;
      align-items: center;

      .title-img {
        display: block;
        width: 144rpx;
        height: 36rpx;
        margin-right: 8rpx;
      }

      .arrow-right {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .tip {
      margin-top: 8rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 32rpx;
    }

    .mall-scroll {
      width: 100%;
      white-space: nowrap;
      margin-top: 20rpx;

      .scroll-item {
        display: inline-block;
        width: 252rpx;
        height: 176rpx;
        margin-right: 16rpx;
      }
    }
  }

  .hot-venue {
    margin-top: 40rpx;

    .hot-venue-scroll {
      margin-top: 24rpx;

      .scroll-list {
        display: flex;
        padding-bottom: 20rpx;
      }

      .scroll-item-box {
        padding-left: 24rpx;

        &:first-child {
          padding-left: 32rpx;
        }

        &:last-child {
          padding-right: 32rpx;
        }
      }

      .scroll-item {
        flex: none;
        position: relative;
        width: 400rpx;
        height: 400rpx;
        //margin-left: 24rpx;
        background: #ffffff;
        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(85, 43, 24, 0.08);
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .info {
          background-color: #fff;
          padding: 24rpx;
          z-index: 2;
          width: 100%;

          .title {
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.9);
            line-height: 40rpx;
            white-space: normal;
          }

          .venue-reverse-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 16rpx;
            width: 132rpx;
            height: 56rpx;
            background: #ff5000;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            font-size: 24rpx;
            font-weight: 600;
            color: #ffffff;
            line-height: 34rpx;
          }
        }
      }
    }
  }

  .events-news {
    margin: 20rpx 32rpx 0;

    .events-news-scroll {
      margin-top: 24rpx;

      .scroll-item {
        position: relative;
        height: 320rpx;
        margin-bottom: 24rpx;
        border-radius: 16rpx;

        .info {
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 16rpx 24rpx 12rpx;
          z-index: 2;
          background: rgba(255, 255, 255, 0.8);
          border-bottom-left-radius: 16rpx;
          border-bottom-right-radius: 16rpx;
          width: 100%;

          .title {
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.9);
            line-height: 44rpx;
          }

          .time {
            margin-top: 4rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.5);
            line-height: 32rpx;
          }
        }
      }
    }
  }

  .ad_wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .ad_img {
      width: 600rpx;
      height: 640rpx;
      border-radius: 24rpx;
      overflow: hidden;
      margin-bottom: 48rpx;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .close {
      width: 96rpx;
      height: 96rpx;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
